<template>
  <div class="app-container">
    <div class="filter-container" />
    <div class="filter-container">

    </div>

    <el-card class="box-card">

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="油站充值"
          name="first"
        >
          <div class="app-container">

            <el-table
              :key="key"
              :data="tableData1"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
              label="序号"
              prop="id"
              align="center"
              width="50"
            >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>

              <el-table-column
                prop="company"
                label="油站名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="phone"
                label="油站电话"
                align="center"
                width=""
              />
              <el-table-column
                label="油站类型"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.type | typeFilter }}
                </template>
              </el-table-column>
              <el-table-column
                prop="payMoney"
                label="累计充值"
                align="center"
                width=""
              />

              <el-table-column
                label="操作"
                align="center"
                width=""
                class-name="small-padding fixed-width"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    style="width:80px"
                    @click="detail(scope.row)"
                  >详情
                  </el-button>

                </template>
              </el-table-column>

            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </div>

        </el-tab-pane>

        <el-tab-pane
          label="交易记录"
          name="second"
        >
          <pfTransfer2></pfTransfer2>

        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import {
  cooperationList
} from "@/api/v1";
import { getInfo, resetOwnerPassword, resetAgentPassword } from "@/api/user";
import pfTransfer2 from "@/components/pfTransfer2"; // Secondary package based on el-pagination

import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-paginationel-pagination
import { parseTime } from "@/utils";
import { MessageBox, Message } from "element-ui";

export default {
  directives: { waves },
  components: { Pagination, pfTransfer2 },
  filters: {
    typeFilter(type) {
      if (type == 1) {
        return "加油站";
      } else if (type == 2) {
        return "修理站";
      } else if (type == 3) {
        return "加气站";
      } else if (type == 4) {
        return "总公司";
      } else {
        return "";
      }
    },
    typeFilter1(role) {
      switch (role) {
        case 1:
          return "中石油";
        case 2:
          return "中石化";
      }
    },
    typeFilter2(role) {
      switch (role) {
        case 1:
          return "上门自取";
        case 2:
          return "快递";
      }
    }
  },
  data() {
    return {
      total: 0,
      tableData1: [],
      tableData2: [],

      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
      transBtn: false,
      allAgent: [],
      walletDate: [],
      supply: [],
      activeName: "first",
      name: "",
      phone: "",
      currentMoney: "",
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id",
        relationId: "",
        relationType: ""
      },
      key: 1, // table key
      walletkey: 1, // table key
      dialogFormVisible: false,
      dialogFormMoney: false,
      dialogFormMoneyTX: false,
      isAgentSub: false
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      this.walletkey = this.walletkey + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  created() {
    this.getList();
  },
  methods: {
    detail(row) {
      console.log(row);
      this.$router.push({
        path: "/cooperationDetail2",
        query: {
          relationId: row.id,
          relationType: 1,
          currentMoney: row.currentMoney,
          phone: row.phone,
          name: row.name,
          uuid: row.uuid
        }
      });
    },
    getList() {
      this.listLoading = true;
      cooperationList().then(res => {
        this.tableData1 = res.data.records;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style>
.el-row {
  margin: 20px;
}
</style>

